<template>
  <div class="shadow">
    <!-- 上下布局 -->
    <!-- 上方导航栏 -->
    <div class="top-nav">
      <!-- logo设置 -->
      <div class="logo">
        <img src="../assets/e-do-blue.png" alt="">
        <span>DoYourBest</span>
      </div>
      <!-- 可拖动区域 -->
      <div class="win-drag"></div>
      <!-- 用户信息设置 -->
      <div class="info">
        <span class="profile">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="30"/>
        </span>
        <span class="info-name">喵先生</span>
        <span class="setting hover-click iconfont icon-setting1"></span>
        <span class="logout hover-click iconfont icon-logout"></span>
        <span class="mini hover-click iconfont icon-line" @click="minWin"></span>
        <span class="close hover-click iconfont icon-close" @click="closeApp"></span>
      </div>
    </div>

    <!-- 下方内容 -->
    <div class="content">
      <!-- 左侧导航 -->
      <div class="left-nav">
        <div class="left-nav-item">
          <span class="wrap" :class="curNav === 'todo' ? 'cur-nav' : ''" @click="clickNav('todo')">
            <span class="warp-icon iconfont icon-check-square"></span>
            <span class="item-text">待办事项</span>
          </span>

        </div>
        <div class="left-nav-item">
          <span class="wrap" :class="curNav === 'chat' ? 'cur-nav' : ''" @click="clickNav('chat')">
            <span class="warp-icon iconfont icon-user"></span>
            <span class="item-text">消息通讯</span>
          </span>
        </div>
        <div class="left-nav-item">
          <span class="wrap" :class="curNav === 'project' ? 'cur-nav' : ''" @click="clickNav('project')">
            <span class="warp-icon iconfont icon-daka"></span>
            <span class="item-text">任务计划</span>
          </span>
        </div>
        <div class="left-nav-item">
          <span class="wrap" :class="curNav === 'tool' ? 'cur-nav' : ''" @click="clickNav('tool')">
            <span class="warp-icon iconfont icon-tool"></span>
            <span class="item-text">常用工具</span>
          </span>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right-content">
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {APP_CLOSE_EVENT, APP_MIN_EVENT} from "@/common/EventType";
import { ipcRenderer } from 'electron';
import {useRouter} from "vue-router";

// 当前点击导航
const curNav = ref('todo')
// 路由
const router = useRouter();
//
onMounted(() => {
  // ipcRenderer.send(LOGIN_SUCCESS)
  // router.push({name: 'todo-list'})
})

// 退出app
const closeApp = () => {
  ipcRenderer.send(APP_CLOSE_EVENT)
}

// 最小化app
const minWin = () => {
  ipcRenderer.send(APP_MIN_EVENT)
}

const clickNav = (route: string) => {
  curNav.value = route
  router.push({name: route})
}

</script>

<style lang="scss" scoped>
  .shadow {
    height: calc(100vh - 60px);
    background-color: rgb(239 231 236 / 95%);
    backdrop-filter: blur(10px);
    //box-shadow:black 0px 0px 10px;
    box-shadow:
        rgb(17 17 26 / 11%) -6px -6px 16px,
        rgb(17 17 26 / 11%) 6px 6px 16px;
    border-radius: 10px;

    // 顶部导航栏
    .top-nav {
      height: 45px;
      line-height: 45px;
      position: relative;

      .win-drag {
        float: left;
        width: calc(100% - 380px);
        height: 45px;
        -webkit-app-region: drag;
      }

      .logo {
        float: left;
        height: 45px;
        line-height: 45px;
        width: 180px;
        text-align: center;
        img {
          //float: left;
          height: 35px;
          width: 35px;
          vertical-align: middle;
          //margin-top: 5px;

        }

        span {
          //float: left;
          vertical-align: middle;
          margin-left: 5px;
          font-size: 20px;
          font-weight: bold;
        }
      }

      .info {
        float: right;
        height: 45px;
        line-height: 45px;
        span {
          margin-right: 5px;
        }
        .profile {
          display: inline-block;
          vertical-align: -webkit-baseline-middle;
        }
        .profile .el-avatar--circle {
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        }
        .info-name {
          vertical-align: top;
        }
        .setting {
          font-size: 18px;
          margin-right: 5px;
        }
        .logout {
          margin-left: 5px;
          font-size: 18px;
        }
        .mini {
          font-size: 18px;
        }
        .close {
          font-size: 18px;
        }

        .hover-click {
          cursor: pointer;
        }
      }
    }

    // 左侧导航栏
    .left-nav {
      width: 180px;
      height: calc(100vh - 110px);
      text-align: center;
      padding-top: 20px;
      display: inline-block;
      vertical-align: top;

      .left-nav-item {
        margin: 12px;
        .wrap {
          display: inline-block;
          width: 130px;
          height: 30px;
          cursor: pointer;
          font-size: 16px;
          border-radius: 5px;

          .warp-icon {
            display: inline-block;
            font-size: 20px;
            vertical-align: middle;
          }
          .item-text {
            display: inline-block;
            font-size: 16px;
            margin-left: 6px;
            vertical-align: text-top;
          }
          &:hover {
            background-color: rgba(32,160,255, 0.6);
            color: #ffffff;
            box-shadow:
                rgb(17 17 26 / 11%) -6px -6px 16px,
                rgb(17 17 26 / 11%) 6px 6px 16px;
          }
        }
        .cur-nav {
          background-color: rgba(32,160,255, 0.6);
          color: #ffffff;
          box-shadow:
              rgb(17 17 26 / 11%) -6px -6px 16px,
              rgb(17 17 26 / 11%) 6px 6px 16px;
        }
      }
    }

    // 右侧内容
    .right-content {
      width: calc(100vw - 240px);
      height: calc(100vh - 110px);
      display: inline-block;
    }
  }
</style>